<template>
  <el-dialog width="400" title="导入第一步" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-table :data="tableData" border style="width: 100%" height="30vh">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="name" label="模版字段信息" width=""></el-table-column>
      <el-table-column prop="excelField" label="导入Excel中的表头" width="">
        <template #header>
          <div>
            导入Excel中的表头
            <hlepMessage
              messageText="此处的字段信息是使用Excel中的表头，与左侧的模版字段信息一一对应，如：模版字段信息为“档案名称”，则此处的导入Excel中的表头为“档案名称”；如果您使用与系统不一样的模版请通过下拉框自定选择与模版对应的字段。" />
          </div>
        </template>
        <template #default="scope">
          <el-select :ref="scope.row.key" v-model="scope.row.excelField" placeholder="请选择"
            @change="(e) => selectChange(e, scope.row)" clearable size="small">
            <el-option v-for="item in excelFieldOption" :key="item.value" :label="item.label" :value="item.value"
              :disabled="alreadyHasList.includes(item.value)">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="nextStep" size="mini">下一步</el-button>
    </div>
  </el-dialog>
</template>

<script>
import hlepMessage from '@/components/hlepMessage.vue'
export default {
  components: { hlepMessage },
  name: 'importOneDialog',
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      excelFieldOption: [],
      alreadyHasList: [],
      formData: new FormData(),
    }
  },
  methods: {
    init(data, excelFieldOption) {
      this.formData = data
      this.tableData = excelFieldOption.impLi
      for (let i = 0; i < excelFieldOption.excelLi.length; i++) {
        this.excelFieldOption.push({
          label: excelFieldOption.excelLi[i],
          value: i,
        })
      }
      this.tableData.forEach((row) => {
        // 如果name与excelLi中存在相同的值，this.tableData中的excelField给值
        if (this.excelFieldOption.some((item) => item.label === row.name)) {
          row.excelField = this.excelFieldOption.findIndex((item) => item.label === row.name)
          this.alreadyHasList.push(row.excelField)
        }
      })
      this.dialogVisible = true
    },
    selectChange(e, row) {
      if (this.$refs[row.key].value === undefined) {
        this.alreadyHasList.push(e)
      } else {
        this.alreadyHasList = this.alreadyHasList.filter(
          (item) => item !== this.$refs[row.key].value
        )
        this.alreadyHasList.push(e)
      }
    },
    nextStep() {
      // 查询导入表格字段信息是否有值
      if (this.alreadyHasList.length === 0) {
        this.$message.warning('请选择导入表格字段信息')
        return
      }
      // 字段信息里面带*的字段不能为空
      if (
        this.tableData.some(
          (item) =>
            item.name.includes('*') && (item.excelField === undefined || item.excelField === '')
        )
      ) {
        this.$message.warning('请选择必填字段')
        return
      }
      const param = this.tableData.reduce((accumulator, item) => {
        if (item.excelField !== undefined) {
          accumulator[item.excelField] = item.key
        }
        return accumulator
      }, {})
      this.formData.append('headerMap', JSON.stringify(param))
      this.formData.append('pageNo', 1)
      this.formData.append('pageSize', 1000)
      this.formData.append('exception', 0)

      this.$emit('nextStep', this.formData, this.tableData)
    },
    closeDialog() {
      this.dialogVisible = false
      this.tableData = []
      this.excelFieldOption = []
      this.alreadyHasList = []
      this.$emit('close')
    },
  },
}
</script>

<style scoped></style>
